@import '../stakingConfig';

.delegationStepsChooseStakePoolDialogWrapper {
  :global {
    .StakePoolThumbnail_content {
      background-color: 1px solid
        var(--theme-delegation-steps-choose-stake-pool-thumb-background-color);
      border: 1px solid
        var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
    }

    .Dialog_subtitle {
      color: var(--theme-delegation-steps-choose-wallet-steps-indicator-color);
    }

    .Dialog_contentWrapper {
      margin-left: -4px;
      padding-left: 4px;
    }

    .Dialog_contentWrapper::-webkit-scrollbar-track {
      margin-top: -8px;
    }

    .ticker {
      text-transform: uppercase;
    }
  }

  .stakePoolsListWrapper {
    margin-top: 14px;
  }

  .content {
    color: var(--theme-delegation-steps-choose-stake-pool-title-color);

    .description {
      font-family: var(--font-medium);
      line-height: 1.38;
      margin: 0 auto 10px;
    }

    .selectStakePoolWrapper {
      align-items: center;
      display: flex;

      .selectedPoolBlock,
      .selectPoolBlockPlaceholder {
        border-radius: 5.8px;
        height: 71px;
        width: 80px;

        &.retiring {
          background: var(
            --theme-staking-stake-pool-retirement-background-color
          ) !important;
        }

        &.alreadyDelegated {
          opacity: 0.3;
        }
      }

      .selectPoolBlockPlaceholder {
        border: 2px solid
          var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
        border-style: dashed;

        .icon {
          margin-top: 24.5px;
          text-align: center;

          svg {
            height: 16px;

            path {
              stroke: var(
                --theme-delegation-steps-choose-stake-pool-checkmark-icon-color
              );
            }
          }
        }
      }

      .selectedPoolBlock {
        border: 1px solid
          var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);

        .ticker {
          color: var(
            --theme-delegation-steps-choose-stake-pool-selected-ticker-color
          );
          font-family: var(--font-semibold);
          line-height: 1.57;
          margin-top: 8px;
          text-align: center;
          @extend %stakePoolTicker;
        }

        .icon {
          margin-top: 10px;
          text-align: center;

          svg {
            vertical-align: top;
            width: 15.5px;

            path {
              stroke: var(
                --theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color
              );
            }
          }
        }

        &.retiring {
          .icon {
            margin-top: 5px;

            svg {
              width: 20px;

              path {
                stroke: var(
                  --theme-staking-stake-pool-retirement-background-color
                );
              }
            }
          }
        }
      }

      .selectStakePoolLabel {
        color: var(
          --theme-delegation-steps-choose-stake-pool-delegated-pools-label-color
        );
        flex: 1;
        font-family: var(--font-light);
        font-size: 16px;
        line-height: 1.38;
        margin-left: 19px;

        span {
          span {
            font-family: var(--font-medium);
          }
        }
      }
    }

    .recentStakePoolsWrapper {
      margin-top: 20px;

      .recentStakePoolsLabel {
        font-family: var(--font-medium);
        margin-bottom: 10px;
      }
    }

    .searchStakePoolsWrapper {
      :global {
        .StakePoolsSearch_clearSearch > div > div {
          margin-left: -15px !important;
        }
      }
    }
  }

  .retiringPoolFooter {
    color: var(--theme-staking-stake-pool-retirement-background-color);
    font-family: var(--font-regular);
    font-size: 16px;
    line-height: 1.38;
    margin: 20px 0;
    text-align: center;
  }
}
